<template>
  <NewCard :isright="true">
    <template slot="title">
      <el-button-group>
        <el-button
          type="primary"
          :class="currentBtnState == 3 ? 'isActive' : ''"
          @click="clickContentBtn"
          >流程</el-button
        >
        <el-button
          type="primary"
          :class="currentBtnState == 4 ? 'isActive' : ''"
          @click="clickStuffBtn"
          >材料</el-button
        >
        <el-button
          type="primary"
          :class="currentBtnState == 1 ? 'isActive' : ''"
          @click="clickProjectBtn"
          >条件</el-button
        >
        <el-button
          type="primary"
          :class="currentBtnState == 2 ? 'isActive' : ''"
          @click="clickConsultBtn"
          >需求</el-button
        >
      </el-button-group>
    </template>

    <template slot="right">
      <!-- <p class="record" @click="clickRecord">更改记录 <i class="el-icon-document"></i></p> -->
      <el-badge :value="unread" class="item" :hidden="!unread">
        <svg-icon icon-class="xx_icon_nor" @click="message" />
      </el-badge>
    </template>
    <!-- 更改记录抽屉 -->
    <el-drawer title="更改记录" size="40%" :visible.sync="recordDrawer">
      <div class="recordDrawer-box">
        <el-button-group>
          <el-button
            type="primary"
            :class="recordBtnState == 3 ? 'isActive' : ''"
            @click="ckStep"
            >流程更改</el-button
          >
          <el-button
            type="primary"
            :class="recordBtnState == 1 ? 'isActive' : ''"
            @click="ckCondition"
            >条件更改</el-button
          >
          <el-button
            type="primary"
            :class="recordBtnState == 2 ? 'isActive' : ''"
            @click="ckDemand"
            >需求更改</el-button
          >
        </el-button-group>
      </div>

      <!-- 条件更改 -->
      <div class="record-main" v-if="recordBtnState == 1">
        <ul v-if="termRecord.length >= 1">
          <li v-for="(term, i) in termRecord" :key="i">
            <h3>
              <p><i></i>第{{ getHanzi(i + 1) }}次更改</p>
              <p>{{ term.createTime }}</p>
            </h3>
            <p v-for="(child, k) in term.children" :key="k">
              {{ child.createName }}
              {{ getChangeType(child) }}
              {{ getName(child) }}
            </p>
          </li>
        </ul>
        <el-empty v-else description="暂无记录"></el-empty>
      </div>
      <!-- 需求更改 -->
      <div class="record-main" v-else-if="recordBtnState == 2">
        <ul v-if="needRecord.length >= 1">
          <li v-for="(term, i) in needRecord" :key="i">
            <h3>
              <p><i></i>第{{ getHanzi(i + 1) }}次更改</p>
              <p>{{ term.createTime }}</p>
            </h3>
            <p v-for="(child, k) in term.children" :key="k">
              {{ child.createName }}
              {{ getChangeType(child) }}
              {{ getName(child) }}
            </p>
          </li>
        </ul>
        <el-empty v-else description="暂无记录"></el-empty>
      </div>
      <!-- 流程更改 -->
      <div class="record-main" v-else>
        <ul v-if="flowRecord.length >= 1">
          <li v-for="(term, i) in flowRecord" :key="i">
            <h3>
              <p><i></i>第{{ getHanzi(i + 1) }}次更改</p>
              <p>{{ term.createTime }}</p>
            </h3>
            <p v-for="(child, k) in term.children" :key="k">
              {{ child.createName }}
              {{ getChangeType(child) }}
              {{ getName(child) }}
            </p>
          </li>
        </ul>
        <el-empty v-else description="暂无记录"></el-empty>
      </div>
    </el-drawer>
    <!-- 更改记录抽屉 end -->

    <!-- 项目条件 -->
    <div class="project-box" v-if="currentBtnState == 1">
      <Condition :projectData="projectData"></Condition>
    </div>
    <!-- 项目条件 end-->

    <!-- 项目需求 -->
    <div class="consult-box" v-else-if="currentBtnState == 2">
      <Demand :projectData="projectData"></Demand>
    </div>
    <!-- 项目需求 end -->

    <!-- 流程步骤 -->
    <div class="content-box" v-else-if="currentBtnState == 3">
      <Step :projectData="projectData"></Step>
    </div>
    <!-- 流程步骤 end -->

    <!-- 项目材料 -->
    <div class="stuff-box" v-else-if="currentBtnState == 4">
      <stuff :projectData="projectData"></stuff>
    </div>
    <!-- 项目材料 end -->
  </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";

import {
  changeRecord,
  changeRecordType,
  TurnChinese,
} from "@/wss/utils/wss.js";
import { getProjectGetInfoApi } from "@/wss/newApi_3-24/doc/project.js";
import { getMessageList } from "@/BMViews/api/upload/index.js";

import Condition from "./condition.vue";
import Demand from "./demand.vue";
import Step from "./step.vue";
import Stuff from "./stuff.vue";

export default {
  components: { NewCard, SubBtn, Condition, Demand, Step, Stuff },
  props: {
    selectRow: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      unread: 0, //未读信息数量

      currentBtnState: 3, // 当前点击的按钮 1项目条件 2项目需求 3流程状态
      // 更改记录的抽屉
      recordDrawer: false,
      // 更改记录的按钮状态
      recordBtnState: 3, //1条件更改 2需求更改 3流程更改 4项目材料

      projectData: {}, //项目的全部数据

      termRecord: [], //条件记录
      needRecord: [], //需求记录
      flowRecord: [], //流程记录
    };
  },
  mounted() {
    // 重新获取项目的信息
    this.$bus.$on("retrieveItem", () => {
      if (this.selectRow.goodsId) {
        this.getProjectGetInfo(); // 获取项目信息
      }
    });

    // $bus打开更改记录的抽屉
    this.$bus.$on("openRecordDrawer", () => {
      this.recordDrawer = true;
    });
  },
  watch: {
    // 监控数据变化就去发请求
    selectRow(newValue, oldValue) {
      if (this.selectRow.goodsId) {
        this.getProjectGetInfo(); // 获取项目信息
      }
    },
  },
  methods: {
    // 获取项目信息
    async getProjectGetInfo() {
      let id = this.selectRow.goodsId;
      let result = await getProjectGetInfoApi({ id });
      if (result.code == 200) {
        this.projectData = result.data;

        // 当有修改记录的时候才去过滤
        if (result.data.changeHistories) {
          // 条件记录 1 条件 2 需求 3 流程
          let termRecord = result.data.changeHistories.filter((itme) => {
            return itme.type == "1";
          });
          let termTime = changeRecord(termRecord); //先根据createTime分组
          termTime.forEach((item) => {
            item.children = changeRecordType(item.children); //然后根据changeType分组
          });
          this.termRecord = termTime;

          // 需求记录 1 条件 2 需求 3 流程
          let needRecord = result.data.changeHistories.filter((itme) => {
            return itme.type == "2";
          });
          let needTime = changeRecord(needRecord); //先根据createTime分组
          needTime.forEach((item) => {
            item.children = changeRecordType(item.children); //然后根据changeType分组
          });
          this.needRecord = needTime;

          // 流程记录 1 条件 2 需求 3 流程
          let flowRecord = result.data.changeHistories.filter((itme) => {
            return itme.type == "3";
          });
          let flowTime = changeRecord(flowRecord); //先根据createTime分组
          flowTime.forEach((item) => {
            item.children = changeRecordType(item.children); //然后根据changeType分组
          });
          this.flowRecord = flowTime;
        } else {
          this.termRecord = []; //条件记录
          this.needRecord = []; //需求记录
          this.flowRecord = []; //流程记录
        }
      }
    },

    // 获取项目未读信息的接口
    async getOrderMeetList() {
      let result = await getMessageList();
      if (result.code == 200) {
        let list = result.data.rows;
        let unrObj = list.find((itme) => {
          return itme.id == this.selectRow.orderNo;
        });
        this.unread = 0; //清除之前的聊天
        if (unrObj.unread) {
          this.unread = unrObj.unread;
        }
      }
    },

    // 点击聊天图标的回调
    message() {
      // 跳转到当前项目的聊天页面
      this.$router.push({
        path: "/Bm-personalCenter/messageCenter",
        query: { orderId: this.selectRow.orderNo },
      });
    },

    // 点击项目条件按钮
    clickProjectBtn() {
      this.currentBtnState = 1;
    },
    //点击项目需求按钮
    clickConsultBtn() {
      this.currentBtnState = 2;
    },
    //点击流程状态按钮
    clickContentBtn() {
      this.currentBtnState = 3;
    },
    // 点击项目材料按钮
    clickStuffBtn() {
      this.currentBtnState = 4;
    },

    // 更改记录的抽屉按钮 ***************************
    clickRecord() {
      this.recordDrawer = true;
    },
    //点击条件更改
    ckCondition() {
      this.recordBtnState = 1;
    },
    //点击需求更改
    ckDemand() {
      this.recordBtnState = 2;
    },
    //点击流程更改
    ckStep() {
      this.recordBtnState = 3;
    },

    // 获取更改记录第几次的中文
    getHanzi(val) {
      return TurnChinese(val);
    },

    // 获取更改记录的类型
    getChangeType(child) {
      if (child.changeType == "1") {
        return "增加了";
      } else if (child.changeType == "2") {
        return "编辑了";
      } else if (child.changeType == "3") {
        return "删除了";
      }
    },

    // 获取更改记录的名称
    getName(child) {
      let name = "";
      child.children.forEach((item) => {
        let noname = item.newName || item.oldName;
        name = name + " " + noname;
      });
      return name + " " + child.children.length + "个条件";
    },

    // 更改记录的抽屉按钮 ***************************end
  },
};
</script>

<style scoped>
h3,
h4,
p,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pd20 {
  padding: 0 20px;
}
/* 更改记录的样式 */
.el-badge {
  cursor: pointer;
}
.el-badge svg {
  font-size: 24px;
}
.record {
  font-size: 12px;
  cursor: pointer;
}
.recordDrawer-box {
  padding: 0 20px;
}
.recordDrawer-box .el-button-group {
  width: 100%;
}
.recordDrawer-box .el-button-group .el-button {
  width: 33%;
}
.record-main {
  padding: 0 20px;
}
.record-main li {
  position: relative;
}
.record-main li > h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #909aaa;
  margin-top: 15px;
  margin-bottom: 15px;
}
.record-main li::before {
  content: "";
  position: absolute;
  left: 1.5px;
  top: 10px;
  display: block;
  width: 1px;
  height: 115%;
  background-color: #efefef;
}
.record-main li > h3 i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #909aaa;
  margin-right: 5px;
}
.record-main li > h3 > p:first-child {
  display: flex;
  align-items: center;
}
.record-main li > h3 > p:last-child {
  font-size: 12px;
  font-weight: 400;
  color: #909aaa;
}
.record-main li > p {
  margin-left: 10px;
  font-size: 12px;
  line-height: 26px;
  font-weight: 400;
  color: #2e3f5e;
}
.record-main li:last-child::before {
  display: none;
}
/* 更改记录的样式 end */

/* 右侧样式 */
::v-deep .top .right {
  flex: none;
}
.el-button-group .el-button {
  background-color: #f0f2f5;
  color: #2e3f5e;
  border: 1px solid #f0f2f5;
  padding: 10px 10px;
}
.el-button-group .el-button.isActive {
  background-color: #fff;
  color: #f87a23;
  font-weight: bold;
}
@media (max-width: 1480px) {
  ::v-deep .top .left h1 img {
    margin-right: 6px;
  }
}

/* 项目条件 */
.conditionsTxt {
  margin-bottom: 60px;
}
.conditionsTxt h3 {
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  /* border-bottom: 1px solid #EBEEF5; */
  padding-bottom: 15px;
  margin-top: 10px;
}
.conditionsTxt h3 > p:first-child {
  width: 12%;
}
.conditionsTxt h3 > p:nth-child(2) {
  width: 76%;
}
.conditionsTxt h3 > p:nth-child(3) {
  width: 12%;
}

::v-deep .conditionsTxt .el-collapse-item__header,
::v-deep .conditionsTxt .el-collapse-item__header.focusing {
  font-size: 14px;
  font-weight: 600;
  color: #2e3f5e;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}
::v-deep .conditionsTxt .el-collapse-item__content {
  padding-bottom: 0;
}
::v-deep .conditionsTxt .el-icon-arrow-right:before {
  content: "\E790";
}
::v-deep .conditionsTxt .el-collapse-item__arrow.is-active {
  transform: rotate(180deg);
}

.conditionsTxt ul > li {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  color: #2e3f5e;
}
.conditionsTxt ul > li i {
  display: block;
  width: 12%;
  font-style: normal;
  line-height: 36px;
}
.conditionsTxt ul > li p {
  width: 68%;
  line-height: 36px;
}
.conditionsTxt ul > li .el-select {
  width: 20%;
}
::v-deep .conditionsTxt ul > li .el-select .el-input__inner {
  padding-left: 10px;
  padding-right: 10px;
}
.el-scrollbar .el-select-dropdown__item {
  padding-left: 10px;
}
.el-scrollbar .el-select-dropdown__item.selected,
.el-scrollbar .el-select-dropdown__item.hover {
  color: #f87a23;
}
.conditionsTxt ul > li:last-child {
  border-bottom: 0;
}

/* 抽屉样式 */
.conditionsTxt.drawerBox h3 {
  margin-top: 0;
}
::v-deep .el-drawer__header {
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
::v-deep .el-drawer__header > span {
  font-size: 18px;
  font-weight: bold;
  color: #2e3f5e;
  padding-left: 20px;
  background: url("~@/wss/assets/image/icon/cardLeft.png") left center no-repeat;
  background-size: 7px;
}

.conditionsTxt.drawerBox h3 > p:nth-child(1),
.conditionsTxt.drawerBox h3 > p:nth-child(2) {
  width: 10%;
}
.drawerEdit h4 {
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.drawerEdit i.el-icon-remove {
  width: 8%;
  color: #909aaa;
  font-size: 14px;
  cursor: pointer;
}
.drawerEdit i.el-icon-remove.isDisabled {
  opacity: 0.5;
}

.conditionsTxt .drawerEdit ul > li {
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 0;
}
.conditionsTxt .drawerEdit ul > li > p {
  width: 8%;
  text-align: center;
}
.conditionsTxt .drawerEdit ul > li > .el-input {
  width: 84%;
}
.drawerEdit .drawerAdd {
  padding: 15px 0;
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
.drawerEdit .drawerAdd i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 12.5px;
  height: 12.5px;
  border: 1px solid #909aaa;
  color: #909aaa;
  margin-left: 11%;
  cursor: pointer;
}
/* 抽屉样式 end */

/* 需求 */
.demandDrawer.conditionsTxt h3 > p:nth-child(3) {
  width: 40%;
}
.demandDrawer.conditionsTxt .drawerEdit ul > li > .el-input:nth-child(3) {
  margin-right: 3%;
}
.demandDrawer.conditionsTxt .drawerEdit ul > li > .el-input {
  width: 40%;
}

/* 步骤 */
.stepDrawer.conditionsTxt h3 > p:nth-child(3) {
  width: 50%;
}
.stepDrawer.conditionsTxt h3 > p:nth-child(4) {
  flex-grow: 1;
  text-align: right;
}

.stepDrawer.conditionsTxt .drawerEdit ul > li > .el-input:nth-child(3) {
  width: 45%;
  margin-right: 5%;
}
.stepDrawer.conditionsTxt .drawerEdit ul > li > .el-input:nth-child(4) {
  width: 15%;
  margin-left: auto;
}
/* 抽屉样式 end*/

/* 项目需求 */
.demandbox h3 > p:nth-child(2),
.demandbox h3 > p:nth-child(3) {
  width: 44%;
}

.demandbox ul > li p {
  width: 44%;
}

/* 流程步骤 */
.conditionsTxt.stepbox ul > li {
  color: #acb6c7;
  cursor: pointer;
}
.conditionsTxt.stepbox ul > li.isUnder {
  color: #f87a23;
}
.conditionsTxt.stepbox ul > li.isSuccee {
  color: #0ca454;
}
.stepbox h3 > p:nth-child(2) {
  width: 36%;
}
.stepbox h3 > p:nth-child(3) {
  width: 16%;
}
.stepbox h3 > p:nth-child(4) {
  width: 18%;
}
.stepbox h3 > p:nth-child(5) {
  width: 18%;
}

.stepbox ul > li p:nth-child(2) {
  width: 36%;
}
.stepbox ul > li p:nth-child(3) {
  width: 16%;
}
.stepbox ul > li p:nth-child(4) {
  width: 18%;
}
.stepbox ul > li p:nth-child(5) {
  width: 18%;
}

/* 点击一条流程步骤的抽屉 */
.stepProcess {
  padding: 0 20px 20px;
  height: 100%;
}
/* 点击一条流程步骤的抽屉 end */

/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
  z-index: 99;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}

@media (max-width: 1180px) {
  .el-button-group .el-button {
    padding: 7px 10px;
  }
}
@media (max-width: 1016px) {
  .el-button-group .el-button {
    padding: 6px 8px;
  }
}
</style>
